﻿{% extends 'blog/base.html' %}
{% block content %}


<!--<script type="text/javascript">
	app.controller('head',function ($scope) {
		$scope.menus={{categorys | safe}}
		$scope.crt={
			name:'{{crtCatName | default:""}}',
			overname:'',
			is_active:function (menu) {
				return menu.name==this.name || menu.name==this.overname
			}
		}
		$scope.click_search=function () {
			$scope.search_win_show=true
			$('#search-win').css('width','250px')
			
		}
		$scope.search_win_blur=function () {
			$scope.search_win_show=false
			$('#search-win').css('width','0px')
		}
	})
	$(function () {
		
		
	})
</script>
-->
<style type="text/css" media="screen" id="test">
	@media (min-width: 1400px){
		.main-content{
			width:980px;
			float: left;
			margin-right: 30px;
		}
		.side-content{
			width:280px;
			float: left;
		}
		.mycontainer{
			width:1300px;
			margin: 0 auto;
			/*float: left;
			position: relative;
			left: 50%;*/
		}

	}
	@media (min-width: 800px) and (max-width: 1400px){
		.mycontainer{
			width:90%;
			margin: 0 auto;
		}
		.main-content{
			width:75%;
			float: left;
			margin-right: 2%;
			margin-left:1%;
		}
		.side-content{
			width:20%;
			float: left;
			margin-right:1%;
		}
	}
	@media (max-width: 800px){
		.mycontainer{
			width:95%;
			margin: 0 auto;
		}
		.side-content{
			display: none;
		}
	}
	.ban-img{
			max-width:95%;
			height: auto;
		}

	body{
		background-color: #FAFAFA;
		/*position: relative;*/
		/*padding-bottom: 200px;*/
		
	}

	#robot_dog{
		width:70px;
		margin: 0 auto;
		display: block;
		/*float: left;*/
	}
	.article{
		padding: 20px;
		min-height:200px;
		background-color: white;
		margin-bottom: 20px;
		border:1px solid #ECECEA;
		border-radius:5px;
	}
	.side-content{
		background-color: #EEEEEE;
		border:1px solid #ECECEA;
		border-radius:5px;
	}
	.info_panel{
		min-height:200px;
		/*background-color: #eee;*/
		
		margin-bottom:10px;
		padding: 10px;
		/*border: 1px solid #BEBEBE;*/
	}
	.info_head{
		border-bottom: 1px solid #999; 
		/*text-align: center;*/
		font-size:120%;
		margin-bottom:10px;
	}
	#search-wrap{
	}
	#search-win{
		display: inline-block;
		width:80%;
	}
	
	{% block self_style %}
		.main-content h2{
			font-size: 100%;
		}
	{% endblock %}

	.syntaxhighlighter {
		padding: 1px 0 !important;
	}
</style>


	<div class='mycontainer'>
		<div class='main-content'>
		{% block art_content %}
			{% for art in articles %}
				<div >
					<div class='article'>
						<h3 class='art_title'>{{art.title}}</h3>
						<hr>
						<div>{{art.html | safe |truncatechars_html:150}}</div>
						<div style='text-align: right;'>
							<a href='/blog/article/{{art.name}}'>View Detail</a></div>
					</div>
					
				</div>
			{% endfor %}

		<nav style='float: right;'>
		  <ul class="pagination">

			{% if page_nums.0 != 1 %}
		    <li>
		      <a href="?page=1" aria-label="Previous">
		        <span aria-hidden="true">&laquo;</span>
		      </a>
		    </li>
		    {% endif %}
		    {% for num in page_nums %}
		    	{% if num == page %}
		    	<li class='active'><a href="#">{{num}}</a></li>
		    	{% else %}
		    	<li><a href="?page={{num}}">{{num}}</a></li>
		    	{% endif %}
		    {% endfor %}
		    {% if last_num != page_count %}
		    <li>
		      <a href="?page={{page_count}}" aria-label="Next">
		        <span aria-hidden="true">&raquo;</span>
		      </a>
		    </li>
		    {% endif %}
		  </ul>
		</nav>
		
		{% endblock %}

		</div>
		<div class='side-content' >
			<div class='info_panel'>
				<img id='robot_dog' src="/static/image/robot_dog.png" title="robot dog" >
					<p>Me:heyulin</p>
				<p>不断努力，不断前行，就是人生的意义。</p>
			</div>
			<div id='search-wrap' style='text-align: center;'>
					<input type="text" id='search-win' placeholder="search" class="form-control" >
				<span class="glyphicon glyphicon-search" aria-hidden="true" 
					ng-click='click_search()'></span>
			</div>
			<div class='info_panel'>
				<div class='info_head'>
					标签
				</div>
				{% for tag in tags %}
				<a class="btn btn-default" href="/blog/tag/{{tag.name}}/?crt_cat={{crt_cat}}" role="button">{{tag.label}}</a>
					
				{% endfor %}
			</div>
			
			{% block index %}
			{% endblock %}
		</div>
		
	</div>
	





<div id='footer' style='min-height:200px;clear: both;'>
	
</div>
{% endblock %}